<style>
    .yourclass {
        width: 260px;
        height: 180px;
        background-color: #81BA25;
        box-shadow: none;
        color: #fff;
    }
</style>
<div class="layui-fluid" lay-title="通知公告表单">
    <div class="layui-card">
        <div class="layui-card-body" style="padding: 15px;">
            <form class="layui-form" action="" lay-filter="form-group">
                <div class="layui-form-item">
                    <label class="layui-form-label">手机号</label>
                    <div class="layui-input-block">
                        <input type="text" name="phone" lay-verify="required|phone" autocomplete="off"
                               placeholder="请输入手机号" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">模板</label>
                    <div class="layui-input-block">
                        <input type="radio" name="status" value="1" title="订货客户通知" checked="">
                        <input type="radio" name="status" value="2" title="被代发客户通知">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">商品</label>
                    <div class="layui-input-block">
                        <input type="text" name="product" lay-verify="required|product" autocomplete="off"
                               placeholder="请输入商品" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">地址/公司</label>
                    <div class="layui-input-block">
                        <input type="text" name="address" lay-verify="required|address" autocomplete="off"
                               placeholder="请输入地址/公司" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">物流</label>
                    <div class="layui-input-block">
                        <input type="text" name="logistics" lay-verify="required" autocomplete="off" placeholder="请输入物流"
                               class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">单号</label>
                    <div class="layui-input-block">
                        <input type="text" name="code" lay-verify="required" autocomplete="off" placeholder="请输入单号"
                               class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-normal" type="button" id="preview">预览</button>
                        <button class="layui-btn" lay-submit="" lay-filter="form-group-submit">提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>


<script>
    layui.use(['jquery', 'admin', 'form', 'layer', 'conf'], function () {
        var $ = layui.jquery
            , layer = layui.layer
            , form = layui.form
            , conf = layui.conf
            , admin = layui.admin;

        form.render(null, 'form-group');

        var table = POPUP_DATA.table;

        //自定义验证规则
        form.verify({
            product: function (value) {
                if (value.length > 20) {
                    return '商品不能超过20位';
                }
            }, address: function (value) {
                if (value.length > 20) {
                    return '地址不能超过20位';
                }
            }
        });

        $("#preview").on("click", function () {
            var status = $('input[name="status"]:checked').val();
            var product = $("input[name=product]").val();
            var address = $("input[name=address]").val();
            var logistics = $("input[name=logistics]").val();
            var code = $("input[name=code]").val();
            var template = "";
            if (status == "1") {
                template = '【浙江追月电气有限公司】尊敬的客户：您从本公司订购并发货至 ' + address + ' 的 ' + product + '，' +
                    '已由 ' + logistics + ' 发出，单号（或代号） ' + code + '，您可在物流官网查询或致电本公司工作人员协助查询19957737232，期待您再次订购本公司 变压器、稳压器、热交换器、机柜空调 等系列产品。';
            } else {
                template = '【浙江追月电气有限公司】尊敬的客户： ' + address + ' 订购并代发至贵公司的 ' + product + ' 已由 ' + logistics + ' 发出，' +
                    '单号（或代号） ' + code + '，您可在物流官网查询或致电本公司工作人员协助查询19957737232，期待您再次订购本公司 变压器、稳压器、热交换器、机柜空调 等系列产品。';
            }

            layer.open({
                type: 1,
                title: false,
                closeBtn: 0,
                shadeClose: true,
                skin: 'yourclass',
                content: template
            });
        });

        /* 监听提交 */
        form.on('submit(form-group-submit)', function (data) {
            var field = data.field;
            var sendSmsData = {};
            sendSmsData.status = field.status;
            sendSmsData.phone = field.phone;
            sendSmsData.product = field.product;
            sendSmsData.logistics = field.logistics;
            sendSmsData.address = field.address;
            sendSmsData.code = field.code;
            var url = "/sysSendSms/save";
            admin.post({
                url: url,
                contentType: "application/json",
                data: JSON.stringify(sendSmsData),
                success: function (res) {
                    if (res.code == 0) {
                        // 提醒保存成功，关闭当前弹窗
                        layer.msg(res.msg);
                        layer.closeAll();
                        //刷新
                        table.reload('list-table-send-sms', {
                            url: '/sysSendSms/page?token=' + admin.loginToken,
                            page: {
                                curr: 1
                            }
                        })
                    } else {
                        layer.msg(res.msg);
                    }
                }
            });
            return false;
        });
    });

</script>